<template>
	<view class="store-style">
		<view class="store-style-tit"><text class="current">1</text><text class="pages">/3</text><text class="name">您的城市与户型</text></view>
		<view :class="['store-style-city',{isSelect: formData.city}]" @click="show=!show">
			{{formData.city?formData.city:'选择所在城市'}}
			<u-icon name="arrow-down" color="#B3B3B3" size="24"></u-icon>
		</view>
		<view class="store-style-list">
			<view :class="['store-style-item',{active: index==i}]" v-for="(data,i) in itemList" :key="i" @click="chose(data,i)">
				{{data}}<view class="icon"><u-icon name="checkbox-mark" v-if="index==i" color="#FFF" size="24"></u-icon></view>
			</view>
		</view>
		<view class="next"><view class="next-btn" @click="next">下一步</view></view>
		<u-picker mode="region" v-model="show" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				itemList: ['一居室','二居室','三居室','四居室及以上'],
				index: 0,
				formData: {
					city: '',
					house: ''
				}
			};
		},
		methods: {
			confirm(e){
				this.formData.city = e.province.label + ',' + e.city.label + ','  + e.area.label
			},
			chose(house,i){
				this.index = i
				this.formData.house = house
			},
			next(){
				if(!this.formData.city){
					return uni.showToast({
						icon: 'none',
						title: '请选择您所在的城市'
					})
				}
				uni.navigateTo({
					animationDuration: 500,
					url: '/merchant/store-style/store-style-2?parameter='+JSON.stringify(this.formData)
				})
			}
		}
	}
</script>

<style lang="scss">
	.store-style-tit{
		padding: 85rpx 0;
		font-size: 32rpx;
		color: #282220;
		font-weight: bold;
		.current{
			font-size: 52rpx;
			color: #282220;
			font-weight: bold;
		}
		.pages{
			margin-right: 30rpx;
		}
	}
	.store-style-city{
		height: 110rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #F7F7F7;
		font-size: 32rpx;
		color: #B3B3B3;
		margin-bottom: 58rpx;
		&.isSelect{
			color: #141414;
		}
	}
	.store-style{
		padding: 0 55rpx 120rpx;
		.store-style-list{
			.store-style-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				height: 110rpx;
				background-color: #F7F7F7;
				border-radius: 8rpx;
				margin-bottom: 40rpx;
				border: solid 2rpx #F7F7F7;
				font-weight: bold;
				color: #141414;
				font-size: 32rpx;
				&.active{
					border-color: #141414;
					background-color: #FFF;
					.icon{
						background-color: #141414;
						border-color: #141414;
					}
				}
				.icon{
					border-radius: 4rpx;
					width: 36rpx;
					height: 36rpx;
					border: solid 2rpx #CCC;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
	.next{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFF;
		height: 120rpx;
		display: flex;
		align-items: center;
		border-top: solid 2rpx #F4F4F4;
		.next-btn{
			height: 90rpx;
			line-height: 90rpx;
			background: #141414;
			border-radius: 8rpx;
			margin: 0 75rpx;
			color: #FFF;
			font-size: 32rpx;
			flex: 1;
			text-align: center;
		}
	}
</style>
